<template>
    <div ref="vTable" class="v-table-container">
        <a-table
            :rowKey="
                (record: any, index: number) => {
                    return index
                }
            "
            :scroll="{ x: 300, y: height }"
            :pagination="false"
            :data-source="listData"
            :bordered="settingConfig.bordered.checked"
            :columns="selectColumns"
            v-bind="$attrs"
        >
            <template v-slot:[item]="{ record, index }" v-for="item in renderSlots" :key="item">
                <slot :name="item" v-bind="{ record, index }"></slot>
            </template>
        </a-table>
        <!--  表格操作按钮  -->
        <div class="table-handle" @click="tableHandleClick">
            <v-icon title="刷新" data-type="refresh" icon-class="handle-item icon-shuaxin"></v-icon>
            <v-icon title="全屏" data-type="fullScreen" icon-class="handle-item icon-quanping1"></v-icon>
            <import-excel style="display:inline-block" @success="importExcelData">
                <v-icon title="导入" data-type="import" icon-class="handle-item icon-daoru"></v-icon>
            </import-excel>
            <v-icon title="导出" data-type="export" icon-class="handle-item icon-daochu"></v-icon>
            <v-icon title="打印" data-type="print" icon-class="handle-item icon-icon-"></v-icon>
            <v-icon title="表格列刷选" data-type="column" icon-class="handle-item icon-liebiaopailie"></v-icon>
            <v-icon title="设置" data-type="setting" icon-class="handle-item icon-shezhi"></v-icon>
        </div>
        <!--  表格显示列筛选  -->
        <div
            v-if="showColumnList"
            class="column-list"
            @click="
                (e) => {
                    e.stopPropagation()
                }
            "
        >
            <a-checkbox-group v-model:value="columnChecks" @change="selectColumnsChange">
                <template v-for="item in columns" :key="item.dataIndex">
                    <div class="column-list-item">
                        <a-checkbox :value="item.dataIndex"></a-checkbox>
                        <span class="column-name">{{ item.title }}</span>
                    </div>
                </template>
            </a-checkbox-group>
        </div>
        <!--  表格打印设置  -->
        <div
            v-if="showPrintList"
            class="print-list-container"
            @click="
                (e) => {
                    e.stopPropagation()
                }
            "
        >
            <div class="print-input">
                <span class="label">打印标题：</span>
                <a-input class="title-input" v-model:value="printTitle" placeholder="请输入标题"></a-input>
                <a-button type="primary" @click="toPrint">打印</a-button>
            </div>
            <a-checkbox-group v-model:value="printChecks" @change="printColumnsChange">
                <div class="print-list">
                    <template v-for="item in columns" :key="item.dataIndex">
                        <div class="print-list-item">
                            <a-checkbox :value="item.dataIndex"></a-checkbox>
                            <span class="column-name">{{ item.title }}</span>
                        </div>
                    </template>
                </div>
            </a-checkbox-group>
        </div>

        <!--  表格设置选项  -->
        <div
            v-if="showSetting"
            class="column-list"
            @click="
                (e) => {
                    e.stopPropagation()
                }
            "
        >
            <template v-for="(item, index) in settingConfig" :key="index">
                <div class="column-list-item">
                    <a-checkbox v-model:checked="item.checked"></a-checkbox>
                    <span class="column-name">{{ item.title }}</span>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, useSlots, Ref } from 'vue'
import { IPrintProperties } from './type'
import { printTable } from '../../utils/print'
import { jsonToSheetXlsx } from '../../plugins/excel/export2Excel'
import importExcel from '../importExcel/importExcel.vue';
const slots = useSlots();
interface ITableProps {
    height?: (string | number),
    listData?: Array<any>,
    columns?: Array<any>
}
const props = withDefaults(defineProps<ITableProps>(), {
    height: '400px',
    listData: () => [],
    columns: () => []
});
const emit = defineEmits(['refresh', 'importSuccess'])
let vTable = ref()
// let isFullScreen = ref(false)
// 表格字段筛选
let selectColumns: Ref<any> = ref([])
let columnChecks: Ref<any> = ref([])
let showColumnList = ref(false)
const renderSlots = Object.keys(slots)
// 表格打印设置
let printProperties: Ref<IPrintProperties[]> = ref([])
let printChecks: Ref<any> = ref([])
let showPrintList = ref(false)
let printTitle = ref('标题')
// 表格设置
let showSetting = ref(false)
let settingConfig = ref({
    bordered: {
        checked: false,
        title: '是否显示边框'
    }
})
// let settingChecks = ref([])

onMounted(() => {
    window.addEventListener('click', handlePageClick)
    for (let i = 0; i < props.columns.length; i++) {
        if (props.columns[i].dataIndex !== 'operation' && props.columns[i].key !== 'operation') {
            printProperties.value.push({
                field: props.columns[i].dataIndex,
                displayName: props.columns[i].title
            })
            printChecks.value.push(props.columns[i].dataIndex)
        }
        columnChecks.value.push(props.columns[i].dataIndex)
        if (!props.columns[i].width) {
            selectColumns.value.push({
                ...props.columns[i],
                width: '100px'
            })
        } else {
            selectColumns.value.push(props.columns[i])
        }
    }
})

const handlePageClick = () => {
    showColumnList.value = false
    showPrintList.value = false
    showSetting.value = false
}

const tableHandleClick = (e) => {
    e.stopPropagation()
    let type = e.target.dataset.type
    // 刷新
    if (type === 'refresh') {
        emit('refresh')
    }
    // 打印
    if (type === 'print') {
        showPrintList.value = !showPrintList.value
    } else {
        showPrintList.value = false
    }
    // 全屏
    if (type === 'fullScreen') {
        vTable.value.requestFullscreen()
    }
    // 列显示设置
    if (type === 'column') {
        showColumnList.value = !showColumnList.value
    } else {
        showColumnList.value = false
    }
    // 设置
    if (type === 'setting') {
        showSetting.value = !showSetting.value
    } else {
        showSetting.value = false
    }
    // 导出
    if (type === 'export') {
        jsonToSheetXlsx({
            data: props.listData,
            header: props.columns.map(column => {
                return {
                    [column.dataIndex]: column.title
                }
            })
        })
    }
}

// 数据导入
const importExcelData = (data: any) => {
    emit('importSuccess', data)
}

// 表格显示列设置
const selectColumnsChange = (e: any) => {
    selectColumns.value = []
    for (let i = 0; i < props.columns.length; i++) {
        if (e.includes(props.columns[i].dataIndex)) {
            if (!props.columns[i].width) {
                selectColumns.value.push({
                    ...props.columns[i],
                    width: '100px'
                })
            } else {
                selectColumns.value.push(props.columns[i])
            }
        }
    }
}

// 打印列设置
const printColumnsChange = (e) => {
    printProperties.value = []
    for (let i = 0; i < props.columns.length; i++) {
        if (e.includes(props.columns[i].dataIndex)) {
            printProperties.value.push({
                field: props.columns[i].dataIndex,
                displayName: props.columns[i].title
            })
        }
    }
}

const toPrint = () => {
    printTable(props.listData, printProperties.value, printTitle.value)
}
</script>

<style lang="less" scoped>
.v-table-container {
    position: relative;
    background: white;

    .close-fullscreen {
        position: absolute;
        top: 30px;
        z-index: 3000;
        cursor: pointer;
    }
}

.table-handle {
    position: absolute;
    right: 0;
    top: -38px;
    cursor: pointer;
    color: #fafafa;
    background: @theme-bac-color;
    padding: 2px 12px;
    box-shadow: 0 2px 8px rgba(147, 146, 146, 0.26);
    border: 1px solid #f2f2f2;

    :deep(.handle-item) {
        display: inline-block;
        font-size: 16px;
        margin-left: 6px;
    }
}

.table-handle:after {
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid @theme-bac-color;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    right: 10px;
}

.column-list,
.print-list-container {
    position: absolute;
    right: 0;
    top: 4px;
    cursor: pointer;
    background: white;
    min-width: 160px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    z-index: 2000;
}

.print-list-container {
    padding: 10px;

    .print-input {
        display: flex;
        align-items: center;

        .label {
            display: inline-block;
            font-size: 14px;
            margin-left: 10px;
        }

        .title-input {
            width: 200px;
            margin-right: 20px;
        }
    }

    .print-list {
        display: flex;
        flex-wrap: wrap;
        width: 400px;
        position: relative;

        .print-list-item {
            padding: 6px;
        }

        .column-name {
            margin-left: 6px;
        }
    }
}

.column-list {
    padding: 2px 4px;

    .column-list-item {
        padding: 4px 6px;
        user-select: none;

        .column-name {
            margin-left: 6px;
        }
    }

    .bottom-confirm {
        width: 100%;
        text-align: center;
    }
}
</style>
